<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="查看详情弹窗"
      width="95%"
      :visible.sync="diaShow"
    >
      <div class="disSbt">
        <div class="leftbox">
          <el-form label-suffix=":" label-width="100px">
            <div class="disSbt">
              <el-form-item label="联系人">
                <el-input v-model="updateForm.name" class="inputbox" disabled></el-input>
              </el-form-item>
              <el-form-item label="面积">
                <el-input class="el-input__small" disabled v-model="updateForm.mianji">
                  <template slot="append">m²</template>
                </el-input>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="城市">
                <el-input v-model="updateForm.city" class="inputbox" disabled></el-input>
              </el-form-item>

              <el-form-item label="电话">
                <el-input
                  disabled
                  v-model="updateForm.phone"
                  class="inputbox"
                ></el-input>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="区域">
                <el-input
                  disabled
                  v-model="updateForm.addrCode"
                  class="inputbox"
                ></el-input>
              </el-form-item>

              <el-form-item label="风格">
                <el-select
                  v-model="updateForm.xihuanfengge"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, idx) in dictTypeBack.xihuanfengge"
                    :key="idx"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="小区">
                <el-input
                  v-model="updateForm.xiaoqu"
                  class="inputbox"
                ></el-input>
              </el-form-item>

              <el-form-item label="发布时间">
                <el-input
                  disabled
                  v-model="updateForm.fabutime"
                  class="inputbox"
                ></el-input>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="详细地址">
                <el-input
                  v-model="updateForm.address"
                  class="inputbox"
                ></el-input>
              </el-form-item>

              <el-form-item label="状态">
                <el-select v-model="updateForm.audiStatus" placeholder="请选择">
                  <el-option
                    v-for="(item, idx) in dictTypeBack.order_zhuangtai"
                    :key="idx"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="预算">
                <el-select v-model="updateForm.yusuan" placeholder="请选择">
                  <el-option
                    v-for="(item, idx) in dictTypeBack.zhuangxiuyusuan"
                    :key="idx"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
<!--                <el-input
                  v-model="updateForm.yusuan"
                  class="inputbox"
                ></el-input>-->
              </el-form-item>

              <el-form-item label="装修类型">
                <el-select v-model="updateForm.leixi" placeholder="请选择">
                  <el-option
                    v-for="(item, idx) in dictTypeBack.zhuangxiufangshi2"
                    :key="idx"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="disSbt">
              <el-form-item label="户型">
                <el-select v-model="updateForm.huxing" placeholder="请选择">
                  <el-option
                    v-for="(item, idx) in dictTypeBack.fangwugaikuan2"
                    :key="idx"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="需求描述">
              <el-input type="textarea" v-model="updateForm.miaoshu"></el-input>
            </el-form-item>
            <el-form-item label="剩余可抢单数">
              <el-input type="text" v-model="updateForm.resideCanBuyZxCount"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="rightbox">
<!--          <div class="redbox">
            <div>手动派单</div>
            <div class="tijiaokk">
              <div>
                <el-input
                  class="kktext"
                  type="textarea"
                  v-model="shuruCen"
                  placeholder="请输入内容"
                ></el-input>
              </div>
              <div>
                <el-button type="primary" size="small" @click="tijiao"
                >提交</el-button
                >
              </div>
            </div>
          </div>-->
          <div class="noltxt">
            <div>手动派单</div>

          </div>
          <div class="tijiaokk">
            <div>
              <el-input
                class="kktext"
                type="textarea"
                v-model="shoudongpaidanText"
                placeholder="请输入装修公司全称"
              ></el-input>
            </div>
            <div>
              <el-button type="primary" size="small" @click="tijiaoShoudongpaidan"
              >提交</el-button>
            </div>
          </div>
          <div class="noltxt">
            <div>客服小计</div>

          </div>
          <div class="tijiaokk">
            <div>
              <el-input
                class="kktext"
                type="textarea"
                v-model="shuruCen"
                placeholder="请输入小计"
              ></el-input>
            </div>
            <div>
              <el-button type="primary" size="small" @click="tijiao"
                >提交</el-button
              >
            </div>
          </div>
          <!-- 客服订单列表 -->
          <div class="taboxkk">
            <el-table border :data="xiaojiList">
              <el-table-column width="150" prop="createDate" label="时间"></el-table-column>
              <el-table-column width="100" prop="createUser" label="跟进人"></el-table-column>
              <el-table-column width="200" prop="type" label="类型">
                <template slot-scope="scope">
                  {{scope.type == '3' ? '小计' : scope.type == '10' ? '手动派单' : '' }}
                </template></el-table-column>
              <el-table-column width="200" prop="params" label="详情情况"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 派发订单列表 -->
      <div class="taboxkk">
        <el-table border :data="alldata.zxOrderVoList">
          <el-table-column
            prop="companyName"
            label="装修公司"
          ></el-table-column>
<!--          <el-table-column prop="dictValue" label="是否接单"></el-table-column>-->
          <el-table-column prop="createDate" label="接单时间"></el-table-column>
          <el-table-column prop="paidanTypeValue" label="派单类型"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.isLiangfang === '1'"
                @click="liangfan(scope.row)"
                >量房
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.xiansuoStatus === '5'"
                @click="qiandan(scope.row)"
                >签单</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.xiansuoStatus === '2'"
                @click="paodan(scope.row)"
                >跑单（无效）</el-button
              >
              <el-button type="text" size="small" @click="sahngchu(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="queren" v-if="apiUrlList.includes('/dailiOrder/post/updateJiaOrderDetail')"> 确认修改 </el-button>
        <el-button @click="closeDia" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  zxComanyHoutaiLiangfang,
  zxComanyHoutaiQiandan,
  zxComanyHoutaiPaodan,
  sysDictbyMultiType,
  updateJiaOrderDetail,
  kefuXiaojiTijiao, shoudongPaidanCompany,
} from "@/api/api.js";
import { getApiUrlList } from '@/utils/auth'

export default {
  emits: ["closeDiaFun"],

  data() {
    return {
      diaShow: false, // 弹窗显示隐藏

      alldata: {
        zxOrderVoList: [],
      }, //进来的全部数据
      orderDetailId:null,
      updateForm: {
        name: null, // 联系人
        mianji: null, // 面积
        city: null, // 城市
        // sex: null, // 性别
        phone: null,
        addrCode: null, // 区域
        xihuanfengge: null, // 风格
        xiaoqu: null, // 小区
        fabutime: null, // 发布时间
        address: null, // 地址
        audiStatus: null, // 状态
        yusuan: null, // 预算
        leixi: null, // 装修类型
        huxing: null, // 户型

        miaoshu: null, // 需求描述
        resideCanBuyZxCount: null, // 剩余可抢单数
      },
      dictTypeBack: {
        fangwugaikuan2: [], //户型
        zhuangxiufangshi3: [], //方式
        xihuanfengge: [], // 风格
        zhuangxiufangshi2: [], // 装修类型
        order_zhuangtai: [], // 状态
        zhuangxiuyusuan:[],
      },
      shuruCen: null, //右边输入内容
      shoudongpaidanText: null, //手动派单的装修公司
      xiaojiList: [], // 客服的订单列表
      apiUrlList:[],
    };
  },
  mounted() {
    this.getOpData();
  },
  methods: {
    openDia(val) {

      this.orderDetailId = val.id;
      this.diaShow = true;
      this.alldata = val;
      this.xiaojiList = val.xiaojiList;
      this.updateForm.name = val.name;
      this.updateForm.mianji = val.mianji;

      this.updateForm.city = val.cityValue;
      this.updateForm.phone = val.phone;

      this.updateForm.xihuanfengge = val.fengge;

      this.updateForm.xiaoqu = val.xiaoqu;
      this.updateForm.fabutime = val.createDate;

      this.updateForm.address = val.address;
      this.updateForm.audiStatus = val.zhuangtai;

      this.updateForm.yusuan = val.yusuan;
      this.updateForm.leixi = val.zhuagnxiuleixing;

      this.updateForm.huxing = val.huxing;
      this.updateForm.miaoshu = val.xuqiumiaoshu;
      this.updateForm.resideCanBuyZxCount = val.resideCanBuyZxCount;
    },
    getOpData() {
      this. apiUrlList = getApiUrlList();

      //获取字典返回
      sysDictbyMultiType({
        dictType:
          "zhuangxiuyusuan,fangwugaikuan2,zhuangxiufangshi3,xihuanfengge,zhuangxiufangshi2,order_zhuangtai",
      }).then((res) => {
        this.dictTypeBack = res.result;
      });
    },
    liangfan(row) {
      this.$confirm(`确认已量房？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        zxComanyHoutaiLiangfang({
          id: row.id,
        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.getData();
        });
      });
    },
    qiandan(row) {
      this.$confirm(`确认已签单？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        zxComanyHoutaiQiandan({
          id: row.id,
        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.getData();
        });
      });
    },
    paodan(row) {
      this.$confirm(`确认已跑单？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        zxComanyHoutaiPaodan({
          id: row.id,
        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.getData();
        });
      });
    },
    sahngchu() {},
    openDingList() {},
    tijiaoShoudongpaidan(){
      this.$confirm(`确认派单给该装修公司？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        shoudongPaidanCompany({
          orderId: this.orderDetailId,
          params:this.shoudongpaidanText

        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.getData();
        });
      });
    },
    tijiao() {

      this.$confirm(`确认提交小计？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        kefuXiaojiTijiao({
          orderId: this.orderDetailId,
          params:this.shuruCen

        }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.getData();
        });
      });
    },
    queren() {
      // console.log("---当前提交数据-----", this.updateForm, this.shuruCen);
      updateJiaOrderDetail({
        id: this.alldata.id,
        //name: this.updateForm.name,
        //mianji: this.updateForm.mianji,
        //cityId: this.updateForm.city,
        //phone: this.updateForm.phone,
        fengge: this.updateForm.xihuanfengge,
        xiaoqu: this.updateForm.xiaoqu,
        createDate: this.updateForm.fabutime,
        address: this.updateForm.address,
        zhuangtai: this.updateForm.audiStatus,
        yusuan: this.updateForm.yusuan,
        zhuagnxiuleixing: this.updateForm.leixi,
        huxing: this.updateForm.huxing,
        xuqiumiaoshu: this.updateForm.miaoshu,

        resideCanBuyZxCount: this.updateForm.resideCanBuyZxCount,
      })
        .then((res) => {
          console.log("------返回数据-----", res);
        })
        .finally(() => {
          this.diaShow = false;
          this.$emit("closeDiaFun", "");
        });
    },
    closeDia() {
      this.diaShow = false;
    },
  },
};
</script>
<style scoped>
.leftbox {
  width: 600px;
}
.rightbox {
  flex: 1;
  margin-left: 30px;
  border: 1px solid #eeeeee;
}
.disSbt {
  display: flex;
  justify-content: space-between;
}
.inputbox {
  width: 200px;
}
.taboxkk {
  overflow-x: hidden;
  overflow: auto;
  max-height: 200px;
}
.redbox {
  border: 1px solid #162bb091;
  height: 200px;
  border-radius: 16px;
  padding: 16px;
}

.tijiaokk {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
}
.kktext {
  min-width: 300px;
  flex: 1;
}
.noltxt {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  background: rgb(190, 190, 190);
  border: 1px solid #eeeeee9b;
  padding-left: 30px;
}
</style>
